<template>
  <el-table
    :data="tableData"
    v-loading="loading"
    :header-cell-style="{ background:'#F5F7FA', color: '#636363' }"
    size="mini"
    :max-height="tableHeight"
    style="width: 100%;">
    <el-table-column type="index" label="No" :index="indexMethod"></el-table-column>
    <slot></slot>
  </el-table>
</template>

<script>
export default {
  name: "TableModel",
  components: {},
  data() {
    return {
      tableHeight: 300
    }
  },
  props: {
    tableData: {
      type: Array,
      default: []
    },
    isShowSelect: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },

  created() {
    this.getTableHeight();
  },

  mounted() {
    let flag = null;
    let _this = this;
    window.onresize = function () {
      flag && clearTimeout(flag);
      flag = setTimeout(() => {
        _this.getTableHeight();
        flag = null;
      }, 300);
    }
  },

  beforeDestroy() {
    window.onresize = null;
  },

  methods: {
    indexMethod(index) {
      return index + 1;
    },

    getTableHeight() {
      let tabH = 60;  // 标签导航高度 + 距离top值
      let select = this.isShowSelect ? 70 : 0;  // 筛选栏高度 + 上下margin
      let tableTitle = 37;  // 表格头部高度
      let pageH = 62;  // 页码高度 + 上下margin
      let h = window.innerHeight;
      this.tableHeight = h - tabH - select - tableTitle - pageH;
    }
  }
}
</script>

<style scoped lang="scss">

</style>
